<template>
    <!-- 提交表单 -->
    <a-form :form="form" @submit="handleSubmit">
  
  
      <!-- 家庭关系板块 -->
      <a-form-item
        v-for="(k, index) in form.getFieldValue('keysss')"
        :key="k"
        v-bind="index === 0 ? formItemLayout : formItemLayoutWithOutLabel"
        :label="index === 0 ? '家庭关系' : ''"
        :required="false"
      >
        <!-- 家庭关系中的字段 -->
        <a-input
          v-decorator="[
            // 字段名
            `fmName[${k}]`,
            {
              validateTrigger: ['change', 'blur'],
              // 字段空验证
              rules: [
                {
                  required: true,
                  whitespace: true,
                  message: '请填写您的家人名称',
                },
              ],
            },
          ]"
          placeholder="家人姓名"
          style="width: 90%; margin-right: 8px"
        />
        <!-- 家庭关系中的字段 -->
        <a-input
          v-decorator="[
            // 字段名
            `fmRelation[${k}]`,
            {
              validateTrigger: ['change', 'blur'],
              // 字段空验证
              rules: [
                {
                  required: true,
                  whitespace: true,
                  message: '请填写家人与本人的关系',
                },
              ],
            },
          ]"
          placeholder="与本人关系"
          style="width: 90%; margin-right: 8px"
        />
  
        <!-- 家庭关系中的字段 -->
        <a-input
          v-decorator="[
            // 字段名
            `fmAddress[${k}]`,
            {
              validateTrigger: ['change', 'blur'],
              // 字段空验证
              rules: [
                {
                  required: true,
                  whitespace: true,
                  message: '请填写您家人的工作单位/住址',
                },
              ],
            },
          ]"
          placeholder="工作单位/住址"
          style="width: 90%; margin-right: 8px"
        />
        <!-- 家庭关系中的字段 -->
        <a-input
          v-decorator="[
            // 字段名
            `fmDuties[${k}]`,
            {
              validateTrigger: ['change', 'blur'],
              // 字段空验证
              rules: [
                {
                  required: true,
                  whitespace: true,
                  message: '请填写您家人的职务',
                },
              ],
            },
          ]"
          placeholder="职务"
          style="width: 90%; margin-right: 8px"
        />
        <!-- 家庭关系中的字段 -->
        <a-input
          v-decorator="[
            // 字段名
            `fmPhone[${k}]`,
            {
              validateTrigger: ['change', 'blur'],
              // 字段空验证
              rules: [
                {
                  required: true,
                  whitespace: true,
                  message: '请填写您家人的电话号码',
                },
              ],
            },
          ]"
          placeholder="联系电话"
          style="width: 90%; margin-right: 8px"
        />
        <!-- 删除一个工作经历按钮 -->
        <a-icon
          v-if="form.getFieldValue('keys').length >= 1"
          class="dynamic-delete-button"
          type="minus-circle-o"
          :disabled="form.getFieldValue('keys').length === 0"
          @click="() => remove(k)"
        />
      </a-form-item>
      <!-- 添加一个工作经历按钮 -->
      <a-form-item v-bind="formItemLayoutWithOutLabel">
        <a-button type="dashed" style="width: 100%" @click="add">
          <a-icon type="plus" /> 添加家庭关系（选填）
        </a-button>
      </a-form-item>
      <!-- 工作经历板块结束 -->
  
  
      <!-- 紧急联系人板块 -->
      <!-- 添加div是因为防止因为第一区块定义两个key导致控制台一直出现警告信息 -->
  <div>
      <a-form-item
        v-for="(x, indexs) in form.getFieldValue('keyssss')"
        :key="x"
        v-bind="indexs === 0 ? formItemLayout : formItemLayoutWithOutLabel"
        :label="indexs === 0 ? '紧急联系人(最少填写一人)' : ''"
        :required="true"
      >
        <!-- 紧急联系人字段 -->
        <a-input
          v-decorator="[
            `efmName[${x}]`,
            {
              validateTrigger: ['change', 'blur'],
              rules: [
                {
                  required: true,
                  whitespace: true,
                  message: '请填写紧急联系人的姓名',
                },
              ],
            },
          ]"
          placeholder="紧急联系人姓名"
          style="width: 90%; margin-right: 8px"
        />
        <!-- 紧急联系人字段 -->
        <a-input
          v-decorator="[
            `efmRelation[${x}]`,
            {
              validateTrigger: ['change', 'blur'],
              rules: [
                {
                  required: true,
                  whitespace: true,
                  message: '请填写紧急联系人与本人关系',
                },
              ],
            },
          ]"
          placeholder="与本人关系"
          style="width: 90%; margin-right: 8px"
        />
        <!-- 紧急联系人字段 -->
        <a-input
          v-decorator="[
            `efmAddress[${x}]`,
            {
              validateTrigger: ['change', 'blur'],
              rules: [
                {
                  required: true,
                  whitespace: true,
                  message: '请填写紧急联系人的工作单位/住址',
                },
              ],
            },
          ]"
          placeholder="紧急联系人的工作单位/职务"
          style="width: 90%; margin-right: 8px"
        />
        <!-- 紧急联系人字段 -->
        <a-input
          v-decorator="[
            `familyPhone[${x}]`,
            {
              validateTrigger: ['change', 'blur'],
              rules: [
                {
                  required: true,
                  whitespace: true,
                  message: '请填写紧急联系人的联系电话',
                },
              ],
            },
          ]"
          placeholder="紧急联系人的联系电话"
          style="width: 90%; margin-right: 8px"
        />
        <a-icon
          v-if="form.getFieldValue('keyss').length >= 1"
          class="dynamic-delete-button"
          type="minus-circle-o"
          :disabled="form.getFieldValue('keyss').length === 1"
          @click="() => removes(x)"
        />
      </a-form-item>
      <a-form-item v-bind="formItemLayoutWithOutLabel">
        <a-button type="dashed" style="width: 100%" @click="adds">
          <a-icon type="plus" /> 添加紧急联系人（至少填一项）
        </a-button>
      </a-form-item>
    </div>
    <!-- 紧急联系人板块结束 -->
  
  
    <!-- 表单提交按钮 -->
      <!-- <a-form-item v-bind="formItemLayoutWithOutLabel">
        <a-button type="primary" html-type="submit">
          Submit
        </a-button>
      </a-form-item> -->
    </a-form>
  </template>
  <script>
  let id = 0;
  let ids = 0;
  import moment from 'moment'
  export default {
    data() {
      return {
        // 栅格布局数据定义
        formItemLayout: {
          labelCol: {
            xs: { span: 24 },
            sm: { span: 4 },
          },
          wrapperCol: {
            xs: { span: 24 },
            sm: { span: 20 },
          },
        },
        formItemLayoutWithOutLabel: {
          wrapperCol: {
            xs: { span: 24, offset: 0 },
            sm: { span: 20, offset: 4 },
          },
        },
        // 定义时间区间选择器验证规则
        rangeConfig: {
          rules: [{ type: 'array', required: true, message: 'Please select time!' }],
        },
        fourthvalues:{

        }
      };
    },
    beforeCreate() {
      this.form = this.$form.createForm(this, { name: 'dynamic_form_item' });
      this.form.getFieldDecorator('keysss', { initialValue: [], preserve: true });
      this.form.getFieldDecorator('keyssss', { initialValue: [], preserve: true });
    },
  
  
  
    methods: {
      // 家庭关系板块移除功能
      remove(k) {
        const { form } = this;
        // can use data-binding to get
        const keys = form.getFieldValue('keysss');
        // We need at least one passenger
        // if (keys.length === 1) {
        //   return;
        // }
        // can use data-binding to set
        form.setFieldsValue({
          keys: keys.filter(key => key !== k),
        });
      },
  
      // 紧急联系人板块移除功能
      removes(x) {
        const { form } = this;
        // can use data-binding to get
        const keyss = form.getFieldValue('keyssss');
        // We need at least one passenger
        if (keyss.length === 1) {
          return;
        }
        // can use data-binding to set
        form.setFieldsValue({
          keyss: keyss.filter(key => key !== x),
        });
      },
  
      // 紧急联系人板块添加功能
      adds() {
        const { form } = this;
        // can use data-binding to get
        const keyss = form.getFieldValue('keyssss');
        const nextKeys = keyss.concat(ids++);
        // can use data-binding to set
        // important! notify form to detect changes
        form.setFieldsValue({
          keyss: nextKeys,
        });
      },
  
  
  
      // 家庭关系板块添加功能
      add() {
        const { form } = this;
        // can use data-binding to get
        const keys = form.getFieldValue('keysss');
        const nextKeys = keys.concat(id++);
        // can use data-binding to set
        // important! notify form to detect changes
        form.setFieldsValue({
          keys: nextKeys,
        });
      },
  
  
  
      // 提交按钮触发事件
      handleSubmit(e) {
        e.preventDefault();
        this.form.validateFields((err, fieldsValue) => {
          if (!err) {
            const fourthvalues ={
              ...fieldsValue,
            }
            this.fourthvalues = fourthvalues
            console.log('Received values of form: ', fourthvalues);
          }
        });
      },
    },
  };
  </script>
  <style>
  .dynamic-delete-button {
    cursor: pointer;
    position: relative;
    top: 4px;
    font-size: 24px;
    color: #999;
    transition: all 0.3s;
  }
  .dynamic-delete-button:hover {
    color: #777;
  }
  .dynamic-delete-button[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
  }
  </style>